/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

// ::-webkit-scrollbar {
//     width: 0px;
//     height: 0px;
//     background-color: #F5F5F5;
// }
// /*定义滚动条轨道 内阴影+圆角*/
// ::-webkit-scrollbar-track {
//     -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
//     border-radius: 10px;
//     background-color: #F5F5F5;
// }
// /*定义滑块 内阴影+圆角*/
// ::-webkit-scrollbar-thumb {
//     border-radius: 10px;
//     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
//     background-color: #555;
// }
html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 12px;
}

* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none
}


/*过渡动画 fade*/

.fade-enter-active,
.fade-leave-active {
    transition: opacity .3s ease;
}

.fade-enter,
.fade-leave {
    opacity: 0;
}


/*过渡动画 slide*/

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
    will-change: transform;
    transition: all 500ms;
    position: absolute;
}

.slide-left-enter,
.slide-right-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}

.slide-left-leave-active,
.slide-right-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}

.demo-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 auto; // max-width: 750px;
    min-width: 320px;
    .demo-title {
        // width: 100%;
        // height: .88rem;
        // line-height: 0.88rem;
        // font-size: 0.34rem;
        // font-weight: 600;
        width: 100%;
        height: .88rem;
        line-height: 0.88rem;
        font-size: 0.34rem;
        font-weight: 600;
        display: flex;
    }
    .demo-panel {
        background: #fff;
        width: 100%;
    }
}


@media only screen and (min-width: 320PX) and (max-width:360PX) {
    html {
        font-size: 42.667Px
    }
}

@media only screen and (min-width: 360PX) and (max-width:375PX) {
    html {
        font-size: 48Px
    }
}

@media only screen and (min-width: 375PX) and (max-width:390PX) {
    html {
        font-size: 50Px
    }
}

@media only screen and (min-width: 390PX) and (max-width:414PX) {
    html {
        font-size: 52Px
    }
}

@media only screen and (min-width: 414PX) and (max-width:640PX) {
    html {
        font-size: 55.2Px
    }
}

@media screen and (min-width: 640PX) {
    html {
        font-size: 85.33Px
    }
}